<template>
  <view class="container">
	<uni-card >
    <view class="lottery">
		<text class="lottery-title">双色球</text>
		<text class="lottery-title" style="float:right;">期号：{{ssq.date}}期</text>
      <view class="numbers">
        <text class="red-ball" v-for="num in ssq.red" :key="num">{{ num }}</text>
        <text class="blue-ball">{{ ssq.blue }}</text>
      </view>
    </view>
	<view class="divider"></view>
    <view class="lottery">
		<text class="lottery-title">福彩3D：</text>
		<text class="lottery-title" style="float:right;">期号：{{fcsdDate}}期</text>
      <view class="numbers">
        <text class="red-ball" v-for="num in fcsd" :key="num">{{ num }}</text>
      </view>
    </view>
	<view class="divider"></view>
    <view class="lottery">
		<text class="lottery-title">大乐透：</text>
		<text class="lottery-title" style="float:right;">期号：{{dlt.date}}期</text>
      <view class="numbers">
		
        <text class="red-ball" v-for="num in dlt.red" :key="num">{{ num }}</text>
        <text class="blue-ball" v-for="num in dlt.blue" :key="num">{{ num }}</text>
      </view>
    </view>
	<view class="divider"></view>
    <view class="lottery">
		<text class="lottery-title">排列三：</text>
		<text class="lottery-title" style="float:right;">期号：{{plsDate}}期</text>
      <view class="numbers">
			<text class="red-ball"  v-for="num in pls" :key="num">{{ num }}</text>
      </view>
    </view>
	<view class="divider"></view>
    <view class="lottery">
		<text class="lottery-title">排列五：</text>
		<text class="lottery-title" style="float:right;">期号：{{plwDate}}期</text>
      <view class="numbers">
		   <text class="red-ball"  v-for="num in plw" :key="num">{{ num }}</text>
      </view>
    </view>
	<view class="divider"></view>
    <view class="lottery">
		<text class="lottery-title">七乐彩：</text>
		<text class="lottery-title" style="float:right;">期号：{{qlc.date}}期</text>
      <view class="numbers">
		<text class="red-ball" v-for="num in qlc.red" :key="num">{{ num }}</text>
		<text class="blue-ball"  >{{ qlc.blue }}</text>
	  </view>
    </view>
	<view class="divider"></view>
    <view class="lottery">
		<text class="lottery-title">七星彩：</text>
		<text class="lottery-title" style="float:right;">期号：{{qxc.date}}期</text>
      <view class="numbers">
		  <text class="red-ball" v-for="num in qxc.red" :key="num">{{ num }}</text>
			<text class="blue-ball"  >{{ qxc.blue }}</text>
			
	  </view>
    </view>
	</uni-card>
  </view>
</template>

<script>
export default {
  data() {
    return {
      ssq: {
        red: [],
        blue: ""
      },
      fcsd: [],
	  fcsdDate:"",
      dlt: {
        red: [],
        blue: []
      },
      pls: [],
      plw: [],
      qlc: {},
      qxc: {}
    };
  },
  onLoad() {
  	this.getAllTypeLottery()
  },
   methods: {
	getAllTypeLottery(){
		this.$myRequest({
			method: 'get',
			url: '/getAllTypeLottery'
		}).then((res) => {
			if(res.flag){
				let all = res.data
				// 双色球
				let ssq = all.ssq
				let ssqArr = ssq.lottery_res.split(",")
				this.ssq.red = ssqArr.slice(0,6)
				this.ssq.blue = ssqArr[6]
				this.ssq.date = ssq.lottery_no
				// 福彩3d
				let fcsd = all.fcsd
				this.fcsd = fcsd.lottery_res.split(",")
				this.fcsdDate = fcsd.lottery_no
				// 大乐透
				let dlt = all.dlt
				let dltArr = dlt.lottery_res.split(",")
				this.dlt.red = dltArr.slice(0,6)
				this.dlt.blue = dltArr[6]
				this.dlt.date = dlt.lottery_no
				
				let pls = all.pls
				this.pls = pls.lottery_res.split(",")
				this.plsDate = pls.lottery_no
				
				let plw = all.plw
				this.plw = plw.lottery_res.split(",")
				this.plwDate = plw.lottery_no
				// 七乐彩
				let qlc = all.qlc
				let qlcArr = qlc.lottery_res.split(",")
				this.qlc.red = qlcArr.slice(0,7)
				this.qlc.blue = qlcArr[7]
				this.qlc.date = qlc.lottery_no
				// 七星彩
				let qxc = all.qxc
				let qxcArr = qxc.lottery_res.split(",")
				this.qxc.red = qxcArr.slice(0,6)
				this.qxc.blue = qxcArr[6]
				this.qxc.date = qxc.lottery_no
				
			}
		});
	}
   }	
}
</script>

<style scoped>
.container {
	padding-top: 1px;
  height: 100vh;
  background-color: #f6eee8;  
  border-radius: 10px;  
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); 
}
.divider  {
    height: 1px;                /* 高度 */
    background-color: #ccc;     /* 颜色 */
    margin: 10px 0;             /* 上下间距 */
}
.title {
  font-size: 24px;
  margin-bottom: 20px;
}
.lottery {
  margin-bottom: 10px;
}
.lottery-title {
  font-weight: bold;
 
}
.numbers {
  margin-top: 5px;
}
.red-ball {
  background-color: #CC0000;
  color: white;
  border-radius: 50%; /* 圆形 */
  width: 30px; /* 圆形直径 */
  height: 30px; /* 圆形直径 */
  display: inline-block;
  text-align: center;
  line-height: 30px; /* 垂直居中 */
  margin-right: 5px;
}
.blue-ball {
 background-color: #007BF2;
 color: white;
 border-radius: 50%; /* 圆形 */
 width: 30px; /* 圆形直径 */
 height: 30px; /* 圆形直径 */
 display: inline-block;
 text-align: center;
 line-height: 30px; /* 垂直居中 */
 margin-right: 5px;
}
</style>
